<template>
  <div class="wrapper">
    <el-table :data="$parent.$parent.topics" style="width: 100%">
      <el-table-column prop="id" label="编号" width="150px" />
      <el-table-column prop="title" label="标题" width="300px" />
      <el-table-column prop="publishTime" label="发布时间" width="300px" />
      <el-table-column prop="customer.nickname" label="发布者" width="200px" />
      <el-table-column label="详情" width="100px" >
        <!-- <router-link to="/topic/detail/{id}">详情</router-link> -->
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="$parent.$parent.total"
      :pageSize="$parent.$parent.pageSize"
      @prevClick="prev"
      @currentChange="change"
      @nextClick="next"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    change(e){
      this.$parent.$parent.currentPage = e ;
      // 分页查询
      this.paging();
    },
    prev(p){
      console.log( '上一页: ' , p );
    },
    next(n){
      console.log( '下一页: ' , n );
    },
    paging(){
      this.axios.get( '/topic/list' , {
                  params: { 
                    pageSize: this.$parent.$parent.pageSize , 
                    currentPage: this.$parent.$parent.currentPage 
                  }
               }).then( resp=>{
                 console.log( resp );
                 let { total , topics } = resp.data ;
                 this.$parent.$parent.total = total ;
                 this.$parent.$parent.topics = topics ;
               }).catch( error=>{
                 console.log( error );
               });
    }
  },
  created(){
    // 分页查询
    this.paging();
  }
};
</script>

<style scope>
.wrapper {
  width: 90%;
  margin: auto ;
}
</style>